<template>
  <div class="item">
    <div class="contain">
      <div>
        <div class="flower">
          <div class="left">
            <img class="leftImg" :src="x" alt="" />
            <!-- 鼠标层罩 -->
            <div v-show="topShow" class="top" :style="topStyle"></div>
            <!-- 最顶层覆盖了整个原图空间的透明层罩 -->
            <div class="maskTop" @mouseenter="enterHandler" @mousemove="moveHandler" @mouseout="outHandler"></div>
          </div>
          <div class="etalage_small_thumbs">
            <div>
              <img @click="
  {
                  {
  x = a;
}
                }
              " src="../assets/flower1.jpeg" alt="" />
            </div>
            <div>
              <img @click="
  {
                  {
  x = b;
}
                }
              " src="../assets/flower2.jpeg" alt="" />
            </div>
            <div>
              <img @click="
  {
                  {
  x = c;
}
                }
              " src="../assets/flower3.jpeg" alt="" />
            </div>
          </div>
        </div>
        <div v-show="rShow" class="right">
          <img :style="r_img" class="rightImg" :src="x" alt="" />
        </div>
      </div>
      <div class="zom">
        <h3>紫玫瑰18枝➕ 波浪➕同款包装</h3>
        <p>
          所有鲜花都是活鲜花不是干花 所有花的单件重量都是正常鲜花的重量
          所有鲜花都是需提前4天预定的 顺丰空运包邮
        </p>
        <div class="price">
          <span>售价：￥119.0</span>
          <br />
          <span>单件重量：180g</span>
        </div>
        <button id="btn" @click="$router.push('/pay?lid=20')">立即购买</button>
        <div class="gouwu">
          <i class="cartw"></i>
          <a href="">加入购物车</a>
        </div>
        <div class="zan">
          <i @click="num++" class="love"></i>
          <span>{{ num }}</span>
        </div>
      </div>
    </div>
    <el-tabs v-model="activeName" type="border-card" :tab-position="tabPosition" @tab-click="handleClick">
      <el-tab-pane>
        <span slot="label"><i class="el-icon-edit"></i> 商品描述</span>
        秋水浸芙蓉，清晓绮窗临镜。柳弱不胜愁重，染兰膏微沁。下阶笑折紫玫瑰，蜂蝶扑云鬓。回首见郎羞走，罥绣裙微褪。......出自:《好事近》年代:宋
        作者:周密
      </el-tab-pane>
      <el-tab-pane><span slot="label"><i class="el-icon-sunny"></i> 商品花语</span>
        <h4>紫玫瑰的含义，紫玫瑰花语有两种：</h4>
        <p>1、安静、等候看护爱情</p>
        <p>2、郁闷、尊贵、浪漫真情、宝贵一起</p>
      </el-tab-pane>
      <el-tab-pane>
        <span slot="label"><i class="el-icon-reading"></i> 商品故事</span>
        相传在遥远的北欧，有一个叫商洛凡的人，他跟自己的未婚妻玫瑰很相爱，不过玫瑰就不幸病逝，两人未曾结婚。商洛凡深爱自己的未婚妻，就将未婚妻葬在月亮湖的紫水晶里，然后过了不久水晶上长出一大片淡紫色的花朵，这就是紫色玫瑰，商洛凡守护在月亮湖边，守护者他和玫瑰的爱情。大家都觉得是玫瑰害怕爱人寂寞，于是幻化成花朵来陪伴它。
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "0",
      tabPosition: "left",
      num: 1,
      x: "/img/flower1.1fee8c8d.jpeg",
      a: "/img/flower1.1fee8c8d.jpeg",
      b: "/img/flower2.94a3424c.jpeg",
      c: "/img/flower3.7119e638.jpeg",
      swiperOptionThumbs: {
        slidesPerView: 3,
      },
      topStyle: { transform: "" },
      r_img: {},
      topShow: false,
      rShow: false,
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    // 鼠标进入原图空间函数
    enterHandler() {
      // 层罩及放大空间的显示
      this.topShow = true;
      this.rShow = true;
    },
    moveHandler(event) {
      // 鼠标的坐标位置
      let x = event.offsetX;
      let y = event.offsetY;
      // 层罩的左上角坐标位置，并对其进行限制：无法超出原图区域左上角
      let topX = x - 100 < 0 ? 0 : x - 100;
      let topY = y - 100 < 0 ? 0 : y - 100;
      // 对层罩位置再一次限制，保证层罩只能在原图区域空间内
      if (topX > 150) {
        topX = 150;
      }
      if (topY > 200) {
        topY = 200;
      }
      // 通过 transform 进行移动控制
      this.topStyle.transform = `translate(${topX}px,${topY}px)`;
      this.r_img.transform = `translate(-${2.5 * topX}px,-${2 * topY}px)`;
    },
    // 鼠标移出函数
    outHandler() {
      var leftImg = document.querySelector(".leftImg");
      // 控制层罩与放大空间的隐藏
      this.topShow = false;
      this.rShow = false;
      leftImg.style.opacity = 1;
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  user-select: none;
}

.item {
  width: 945px;
  margin: 0 auto;
  padding: 50px 0 0 0;
}

.contain {
  // width: 300px;
  display: flex;
}

.flower {
  width: 300px;
  position: relative;
  margin-right: 66px;
}

.rightImg {
  display: inline-block;
  width: 800px;
  // height: 800px;
  position: absolute;
  top: 0;
  left: 0;
}

/* 右边的区域图片放大空间 */
.right {
  margin-left: 350px;
  width: 400px;
  height: 400px;
  border: 1px solid red;
  position: absolute;
  top: 250px;
  z-index: 999;
  overflow: hidden;
}

/* 一个最高层层罩 */
.maskTop {
  width: 300px;
  height: 400px;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
}

/* 层罩，通过定位将左上角定位到(0,0) */
.top {
  width: 150px;
  height: 200px;
  // background-color: rgba(8, 8, 8, 0.425);
  background-color: transparent;
  position: relative;
  top: -405px;
  left: 0;
  border: 2px solid white;
  box-shadow: 1px 1px 1px 200px rgba(255, 255, 255, 0.404);
}

/* 原图的显示 */
.leftImg {
  width: 300px;
  height: 400px;
  display: inline-block;
}

/* 原图的容器 */
.left {
  overflow: hidden;
  width: 300px;
  height: 400px;
  border: 1px solid teal;
  float: left;
  position: relative;
  margin-bottom: 15px;
}

.etalage_small_thumbs {
  // flex-wrap: wrap;
  width: 300px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 40px;

  img {
    width: 90px;
    padding: 2px;
    border: 1px solid #ccc;
  }
}

.zom {
  line-height: 50px;

  h3 {
    color: #6b6b6b;
    font-size: 1.3em;
  }

  p {
    line-height: 20px;
    color: #6b6b6b;
    font-size: 14px;
  }

  .price {
    line-height: 30px;
    margin: 20px 0;
    color: #fe6847;
    font-size: 20px;
  }

  #btn {
    width: 112px;
    height: 43px;
    background: #fe6847;
    border: none;
    border-bottom: 4px solid #e94f2d;
    border-radius: 4px;
    color: white;
  }

  .gouwu {
    a {
      text-decoration: none;
    }

    .cartw {
      width: 20px;
      height: 20px;
      background-image: url("../assets//购物车空.svg");
      background-size: 20px 20px;
      display: inline-block;
      position: relative;
      top: 4px;
      margin-right: 6px;
    }
  }

  .zan {
    .love {
      width: 28px;
      height: 28px;
      background-image: url("../assets/点赞.svg");
      background-size: 28px 28px;
      display: inline-block;
      position: relative;
      top: 8px;
      margin-right: 6px;
    }
  }
}
</style>
